<template>
<div>
  <ul>
    <!-- router-link的to等价于a的href -->
    <!-- query参数 -->
    <li><router-link tag="button"  to="/student?arg=aaa">student</router-link></li>
    <li><router-link tag="button"  :to="{
           name:'teacherRoute',
           params:{
            id: '123456'
           },
           query:{
            score:'3.4'
           }
    }">teacher</router-link></li>
    <!-- 编程式路由导航 -->
    <li><button @click="toTeacherPage">编程式路由导航teacher</button></li>  

    <li><button @click="forwardPage">前进</button></li>
    <li><button @click="backPage">后退</button></li>
    <li><button @click="gotoPage(3)">跳转</button></li>
  </ul>
   <!-- keep-alive 的作用是缓存路由组件，这样在进行切换时被缓存的组件不会被销毁，input里的数据就会被保存 -->
   <!-- include标签指定要缓存的组件名，多个组件用逗号分隔 -->
    <!-- 若需要使用，组件必须显示指定name属性 -->
  <keep-alive include="StudentView,TeacherView">
  <!-- 路由组件page展示在这里 -->
  <router-view></router-view>

  </keep-alive>


</div>


</template>


<script>


export default {
  methods:{
    toTeacherPage(){
      //push不会覆盖栈顶

    //   this.$router.push({
    //        name:'teacherRoute',
    //        params:{
    //         id: '654321'
    //        },
    //        query:{
    //         score:'4.3'
    //        }
    // })

    //replace会替换掉栈顶
          this.$router.replace({
           name:'teacherRoute',
           params:{
            id: '654321'
           },
           query:{
            score:'4.3'
           }
    })
    },
    forwardPage(){
      //页面前进
      this.$router.forward()
    },
    backPage(){
      //页面后退
      this.$router.back()   
    },
    gotoPage(page){
      //页面指针跳转
      this.$router.go(page)
    }
  }

}
</script>

<style>

</style>
